<template>
<div>
  <div class="bg-light">
    <div class="container-title">基础信息</div>
    <Form :label-width="130" :model="form">
      <Row class="pr">
        <Col span="10">
          <FormItem label="门店名称: " >
            <p>{{form.storeName}}</p>
          </FormItem>
        </Col>
        <Col span="10">
          <FormItem label="联系人: " >
            <p>{{form.storeContactName}}</p>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="10">
          <FormItem label="门店地址: " >
            <p>{{form.address}}</p>
          </FormItem>
        </Col>
        <Col span="10">
          <FormItem label="手机号码: " >
            <p>{{form.storePhone}}</p>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="10">
          <FormItem label="门店类型: " >
            <p>{{form.storeTypeName}}</p>
          </FormItem>
        </Col>
        <Col span="10">
          <FormItem label="经销商: " >
            <p>{{form.distributorName}}</p>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr" v-if="!isCheck">
        <Col span="10">
          <FormItem label="审核时间: " >
            <p>{{form.auditDate}}</p>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
  <div class="bg-light">
    <div class="container-title">季度审核情况</div>
    <Form :label-width="130" :model="form">
      <div v-for="(item, index) in form.monthDTOList" :key="index">
        <Row class="pr">
          <Col span="10">
            <FormItem label="" >
              <p class="font-red x-big" style="margin-left:-110px">{{item.month}}月份（{{item.statusMeaning}}）</p>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span="7">
            <FormItem label="进货指标: " >
              <p>{{item.purchaseTaskQuantity}}</p>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="进货积分: " >
              <p>{{item.effectiveIntegral}}</p>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="审定积分: " >
              <p>{{item.auditIntegral}}</p>
            </FormItem>
          </Col>
        </Row>
        <Row class="pr">
          <Col span="7">
            <FormItem label="有效进货: " >
              <p>{{item.effectiveQuantity}}</p>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="进货返利: " >
              <p>{{item.effectiveRebate}}</p>
            </FormItem>
          </Col>
          <Col span="7">
            <FormItem label="审定返利: " >
              <p>{{item.auditRebate}}</p>
            </FormItem>
          </Col>
        </Row>
      </div>
    </Form>
  </div>
  <div class="bg-light">
    <div class="container-title">季度补发进货积分返利</div>
    <Form :label-width="130" ref="form" :model="form" :rules="rule">
      <Row class="pr">
        <Col span="20">
          <FormItem label="季度补发进货积分: " prop="quarterRepairIntegral">
            <p v-if="!isCheck">{{form.quarterRepairIntegral}}</p>
            <template v-else>
              <InputNumber readonly v-model="form.quarterRepairIntegral" precision="2" :min="0" :max="9999999999999999999999"></InputNumber>
            </template>
          </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="20">
          <FormItem label="季度补发进货返利: " prop="quarterRepairRebate">
            <p v-if="!isCheck">{{form.quarterRepairRebate}}</p>
            <template v-else>
              <InputNumber readonly v-model="form.quarterRepairRebate" precision="2" :min="0" :max="9999999999999999999999"></InputNumber>
            </template>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="20">
          <FormItem label="返利备注：">
            <template v-if="isCheck">
              <Input v-model="form.auditRebateRemark" placeholder="返利备注" :maxlength="30"/>
            </template>
            <p v-else>{{form.auditRebateRemark}}</p>
          </FormItem>
        </Col>
      </Row>
      <Row class="pr">
        <Col span="20">
          <FormItem label="积分备注：">
            <template v-if="isCheck">
              <Input placeholder="积分备注" v-model="form.auditIntegralRemark" :maxlength="30"/>
            </template>
            <p v-else>{{form.auditIntegralRemark}}</p>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</div>
</template>
<script>
  export default {
    props: {
      id: {
        type: [Number, String]
      },
      isCheck: {
        type: Boolean,
        default: false
      }
    },
    mounted () {
      this.getDetail()
    },
    data() {
      return {
        form: {
          storeName: '',
          address: '',
          storeContactName: '',
          storePhone: '',
          storeTypeName: '',
          distributorName: '',
          auditDate: '', // 审核时间
          monthDTOList: [], // 季度表格
          quarterRepairIntegral: '', // 季度补发进货积分
          quarterRepairRebate: '', // 季度补发进货返利
          auditIntegralRemark: '', // 积分备注
          auditRebateRemark: '' // 返利备注
        },
        rule: {
          quarterRepairIntegral: [{required: true, type: 'number', message: "请输入季度补发进货积分", trigger: "change"}],
          quarterRepairRebate: [{required: true, type: 'number', message: "请输入季度补发进货返利", trigger: "change"}]
        }
      } 
    },
    methods: {
      getDetail() {
        this.$ajaxGet(`/assets/store_int_quarter/detail/${this.id}`).then(data => {
          this.form = {
            storeName: data.storeName,
            address: (data.provinceName ? data.provinceName : '') + (data.cityName ? data.cityName : '') + (data.areaName ? data.areaName : ''),
            storeContactName: data.storeContactName,
            storePhone: data.storePhone,
            storeTypeName: data.storeTypeName,
            distributorName: data.distributorName,
            auditDate: data.auditDate, // 审核时间
            monthDTOList: data.monthDTOList, // 季度表格
            quarterRepairIntegral: data.quarterRepairIntegral, // 季度补发进货积分
            quarterRepairRebate: data.quarterRepairRebate, // 季度补发进货返利
            auditIntegralRemark: data.auditIntegralRemark, // 积分备注
            auditRebateRemark: data.auditRebateRemark // 返利备注
          }
        })
      }
    }
  }
</script>
